偉大的作品靠的不是力量，而是靠著堅持來完成的。 — Samuel Johnson

專案起源

在這八週的訓練裡，利用最後兩週的時間，找到與自己目標一致的隊友，進行前後分離開發，將這段時間的學習積累化為實作，了解自己在實作的過程會遇到哪些問題，同時培養遠端協作開發的能力，如何溝通、如何解決、如何保持一個正向的心態將專案一起堅持到最後。接下來，會將此次專案分為四大部分來說明，包含「專案中扮演的角色」、「開發過程總整理」、「黑客松挑戰」及「學習心得」。

專案中扮演的角色

首先感謝Rita的邀請，讓我可以加入團隊並且負責前端部分，而團隊負責部分分別是自己跟YuSian Du負責前端，Rita、ChiaHui負責後端。前端以Vue為框架實作SPA網站，自己大致上負責的功能及畫面有下面幾項：

• 首頁
• 回覆頁
• 個人資料頁
• 追蹤查詢頁
• 公開聊天室
• 前台的側導覽頁
• 右邊的Top跟隨者頁面

在實作這些頁面中，其中包含很多的類似功能或套件像是

1. 透過非同步方式方式呼叫API達到資料的CRUD
2. 使用Vue State統一管理重複利用到的功能或變數。
3. 使用propsandemit達到父子層之間的元件溝通。
4. 利用sweetalert2套件達到提醒使用者目前的操作狀態。
5. 利用moment.js達到自訂義時間計算。
6. 利用vue-loading-overlay套件改善非同步時的UX使用者體驗。
7. 利用vue-socket.io-extended實作公開聊天室與後端socket.io sever進行發送及監聽。
8. 網站RWD

開發過程總整理

開發前

此次開發為前後分離，小組大致上分為兩前端兩後端，而自己負責前端部分。再確認好隊友及拿到專案設計稿後，組內很快進行了第一次小組溝通，分別針對「User Stories」、「專案內容分工」及「前後端的資料需求確認」開始著手。

為了達到有效的前後端的小組會議，一開始自己與另一位前端會先開會，針對前端部分，確認頁面所需元件、要如何分工及統整頁面資料需求給後端進行討論，最後討論結果如下：

頁面所需元件

最後以這份元件表當做我們頁面開發的基礎。

分工表

一開始打算用切分元件的方式分工，達到不會互相重工的工作內容，但是後來在實作過程中發現雖然不重工，但是在組裝對方元件的過程不是很順利，畫面始終不是自己想要的效果，要修改內容也不是很方便，加上時間上的壓力，為了減少對方的負擔，決定自己先重新刻SideNavBar跟followingsCard看看效果，這邊也謝謝組員的諒解。

統整頁面資料需求給後端

這部分就統整了一份筆記給後端參考。

開會討論

由於疫情加上大家都不在同個區域，所以我們選擇用線上方式參與會議，重點主要內容分為幾項：

• 了解組員們的個性及專案目標：一個好的團隊除了Leader重要外，更重要的是團隊氛圍，確認大家的目標一致性。
• 開發過程中的互相利用的資料及順序：前端先做切版，做完看後端進度，後端進度快的話直接串API。
• 下次開會的時間及驗收：由於專案有時間性，需要訂定下次開會日期，除了驗收也方便後續專案的討論，為了了解各自的進度，我們同時也以Trello追蹤及幫忙隊友卡關的地方。
  

開發中

首先，感嘆後端的組長及組員以飛快的速度在下次開會的日期前就已經將各個API完成，並且很貼心的做出了對照表，讓前端在畫面切完版後可以直接對照服用。

這時期除了後端開始研究進階挑戰外，前端在串接API時更是需要與後端保持一定程度的聯繫、討論，因為會發現彼此資料及畫面的設計邏輯都不盡相同，如何配合、說服對方彼此的想法讓專案更順利的進行更重要。
前端的部分，在這時期花了很多時間討論各種問題，像是第一次協作的關係，彼此對於GitHub PR的步驟不太熟悉，討論一個晚上，也算是這次協作開發新的學習體驗。而在解決彼此的問題外，在不影響組員們前端的設計邏輯架構外適時的協助排版，美化專案內容，最後把專案Merge測試。

開發後

開發完後，在專案時間截止前，主要做了兩項事情

• 將專案打包上傳gh-pages（雲端）
• 組員們互相測試專案、修正錯誤
  雖然在專案上傳前已經自我先針對專案進行大部分的測試，但是透過組員們的交叉檢查更可以了解是否有預期外的錯誤產生並修正。
  
  

黑客松挑戰

努力了兩個禮拜後，稍微充電休息一下，迎接為期兩天的時間，做到指定挑戰的額外功能的黑客松，這次的主題是使用Socket.io實作聊天室功能。一個新的工具、新的概念。
實作過程：

1. 開發前請詳閱說明書，了解Socket.io的原理、溝通方式、如何達到「即時」聊天跟保存歷史訊息
2. 討論實作方向，前端以Socket.io的事件發送及監聽後端送來的廣播為方向；後端以監聽送來的訊息及發送廣播為方向著手
3. 前端利用半天時間切版、後端開始實作Socket.io
4. 前端開始實作簡易的local socket.io測試資料，確認網頁發送、監聽正常，將repo送給後端pull測試
5. 建立歷史訊息API將即時聊天室加入閱覽歷史訊息的功能。
6. 利用socket.io實作即時上下線功能
7. 互相測試、修正已知Bug

開發前，大家都會分享查到的資訊讓彼此更容易理解狀況，過程中，大家好像一直都在線上，即時回饋實作遇到的問題，然後一起想辦法解決，這個過程還蠻有趣的，大家對於一個問題會有各自的想法，不一定誰對誰錯，但是新的事物，試了才知道，在確定溝通的通道名稱及對應的資料是一致後，socket.io的「即時」功能也有了雛形，後端再進行相關的資料處理後，也完成了歷史訊息API、即時上下線功能，公開聊天室也差不多完成了！

實作成果圖：

最後，附上此次專案的前、後端連結及實作網址

• 前端Repo
• 後端Repo
• 實作網址

學習心得

此次專案中，綜合了很多技術面向的應用，也讓我收穫很多，包含了元件更新、非同步資料更新、資料的CRUD、父子層props emit傳遞、部分套件應用增加UX使用者體驗、api設定、mixin應用、vue state狀態管理...等，最棒的是，感覺很模擬一個業界開發的專案，要如何管理一份專案、Git如何管理等等，都是很寶貴的經驗。

而經歷了八週的學習、學期三的最後階段，在這個SimpleTwieter專案中，如果要為組內打分數，0-10分，我會給9分，或許這次組間專案中我們不是最好的一組，但是覺得大家從組隊到現在都很和睦、而且遇到問題都會跳出來參與討論、即使不熟悉一些工具操作，都很樂意學習，重點是大家都堅持到最後一分一秒，就如同Samuel Johnson所言，偉大的作品靠的不是力量，而是靠著堅持來完成的。這份團隊合作及成就感讓我很感動，感謝Rita組長，建立大家團隊的氣氛、後端神隊友；感謝ChiaHui，後端神隊友，無時無刻好像都在線上幫忙解決問題；感謝YuSian Du，即使兼職學習也責無旁貸努力的協助幫忙把部分網頁撐起來。剩下扣的一分，大概就是我們妄自菲薄說可以做到指定功能三吧～～～，哈哈；對於自己，雖然自己也是兼職學習，但是我可以很有自信的說，我在這份專案，貢獻了99分的心力。最後，這次協作開發的經驗我相信是團隊中在學期三很美好、印象深刻的回憶吧。

最最後，感謝Alpha Camp，提供此次協作的機會，體會一下類業界的開發過程，同時也提供助教的Tech Hour，讓我們更快速的吸收解決方法的經驗，也謝謝助教Jiang學期三過程的陪伴。

如果可以再來一次...

回到這嚴肅的話題...，如果可以再來一次，我可能會在前端專案開發前，討論並統一專案的coding style、切版是否使用scss，要放在每個元件底下還是分開管理、每個頁面、功能開發完成的要求、格式及註解、GitHub的所提交的brach及commit格式。實作中，可以多考慮UI/UX的體驗，多一點的功能想像。Trello方面可以更積極的互動討論。